import React, { useState, useEffect } from 'react'
import { Space, Table, Pagination, Button, Input, Select, Tag, Dropdown, Collapse } from 'antd';
import { connect } from "react-redux"
import {
  DownOutlined,
  DashOutlined
} from '@ant-design/icons';
import axios from 'axios';
const getRowClassName = (record, index) => {
  let className = '';
  className = index % 2 === 0 ? "oddRow" : "evenRow";
  return className
}



const data = [
  {
    key: '1',
    deviceId: '12312312321',
    deviceName: "长乐区-福州市配电",
    state: '投运',
    devSN: "T23JOOJ32424242344",
    contractType: "租赁",
    product: "智芯融合终端",

  },
  {
    key: '2',
    deviceId: '12312312321',
    deviceName: "长乐区-福州市配电",
    state: '投运',
    devSN: "T23JOOJ32424242344",
    contractType: "租赁",
    product: "智芯融合终端",
  },
  {
    key: '3',
    deviceId: '12312312321',
    deviceName: "长乐区-福州市配电",
    state: '投运',
    devSN: "T23JOOJ32424242344",
    contractType: "租赁",
    product: "智芯融合终端",
  },
  {
    key: '4',
    deviceId: '12312312321',
    deviceName: "长乐区-福州市配电",
    state: '投运',
    devSN: "T23JOOJ32424242344",
    contractType: "租赁",
    product: "智芯融合终端",
  },
  {
    key: '5',
    deviceId: '12312312321',
    deviceName: "长乐区-福州市配电",
    state: '投运',
    devSN: "T23JOOJ32424242344",
    contractType: "租赁",
    product: "智芯融合终端",
  },
  {
    key: "6",
    deviceId: '12312312321',
    deviceName: "长乐区-福州市配电",
    state: '投运',
    devSN: "T23JOOJ32424242344",
    contractType: "租赁",
    product: "智芯融合终端",
  },
  {
    key: '7',
    deviceId: '12312312321',
    deviceName: "长乐区-福州市配电",
    state: '投运',
    devSN: "T23JOOJ32424242344",
    contractType: "租赁",
    product: "智芯融合终端",
  },
];
const rowSelection = {
  onChange: (selectedRowKeys, selectedRows) => {
    console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
  },
  getCheckboxProps: (record) => ({
    disabled: record.name === 'Disabled User',
    // Column configuration not to be checked
    name: record.name,
  }),
};
function EdgeDevice(props) {
  const [selectionType, setSelectionType] = useState('checkbox');
  const [dataSource, setDataSource] = useState([])
  useEffect(() => {
    axios.get("/devicearchives/selectall").then(res => {
      setDataSource(res.data)
    })
  }, [])
  const items = [
    {
      key: '1',
      label: <Space style={{ fontSize: '12px' }} size={30}>
        <div>
          设备名称<Input placeholder="请输入" className='inputValue' />
        </div>
        <div>
          设备SN号<Input placeholder="请输入" className='inputValue' />
        </div>
        <div>
          设备标识<Input placeholder="请输入" className='inputValue' />
        </div>
        <div>
          所属产品
          <Select
            defaultValue={"全部"}
            className='inputValue'
            dropdownStyle={{ fontSize: "7px" }}
            options={[
              {
                value: '全部',
                label: '全部',
              },

            ]}
          />
        </div>
      </Space>,
      children:
        <Space style={{ fontSize: "12px" }} size={30}>
          <div>
            任务编号<Input placeholder="请输入" className='inputValue' />
          </div>
          <div>
            设备标识<Input placeholder="请输入" className='inputValue' />
          </div>
          <div>
            发起人<Input placeholder="请输入" className='inputValue' />
          </div>
          <div>
            所属地市
            <Select
              defaultValue="福州市"
              className='inputValue'
              disabled
              options={[
                {
                  value: '福州市',
                  label: '福州市',
                },
              ]}
              style={{ height: '30px', fontSize: "12px" }}
            />
          </div>
        </Space>,
    },
  ];
  const columns = [
    {
      title: '设备标识',
      dataIndex: 'deviceid',
      key: 'deviceid',
      align: "center",
      width: "12%",
      fixed: 'left',
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '设备名称',
      dataIndex: 'devicename',
      key: 'devicename',
      align: "center",
      fixed: 'left',
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '运营状态',
      dataIndex: 'state',
      key: 'state',
      align: "center",
      render: (text) => {
        console.log();
        return <Tag color={text === "在线" ? "cyan" : "red"}>{text}</Tag>
      }
    },
    {
      title: '设备SN号',
      dataIndex: 'devsn',
      key: 'devsn',
      align: "center",
      width: "12%",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '合同类型',
      dataIndex: 'contracttype',
      key: 'contracttype',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '所属产品',
      dataIndex: 'product',
      key: 'product',
      align: "center",
      render: (text) => {
        return <span style={{ fontSize: "12px" }}>{text}</span>
      }
    },
    {
      title: '操作',
      dataIndex: 'operate',
      key: 'operate',
      fixed: 'right',
      align: "center",
      width: "14%",
      render: (text, item) => {
        return <Space>
          <a style={{ fontSize: "12px", }} onClick={() => showDrawer(item)}>详情</a>
          <a style={{ fontSize: "12px", }} >编辑</a>
          <a style={{ fontSize: "12px", }} >检修</a>
          <a style={{ fontSize: "12px", }} >退运</a>
        </Space>
      }
    },
  ];
  const showDrawer = (item) => {

    props.showDrawer(item)
  };
  const expandIcon = (e) => {
    return <DownOutlined />
  }
  return (
    <div>
      <div style={{ display: 'flex' }}>
        <Collapse items={items} bordered={false} expandIconPosition="end" expandIcon={(e) => expandIcon(e)} style={{ flex: "1 1 900px", background: "white" }} />
        <div style={{ width: "238px", padding: "12px 0 0 0", textAlign: "right" }}>
          <Button style={{ color: "white", background: "#1FBBA9", fontSize: "12px", borderRadius: "4px" }}>查询</Button>
          <Button style={{ color: "black", fontSize: "12px", borderRadius: "4px", margin: "0 0 0 10px" }}>重置</Button>
          <Button style={{ color: "white", background: "#1FBBA9", padding: "4px 9px", margin: "0 0 0 10px" }}>批量修改
            <Dropdown
              menu={{

              }}
              placement="bottomLeft"
              arrow
            >
              <DashOutlined style={{ borderLeft: "2px solid white", padding: "0 0 0 5px" }} />
            </Dropdown>
          </Button>
        </div>
      </div>

      <Table
        rowSelection={{
          type: selectionType,
          ...rowSelection,
        }}
        rowKey={(item) => item.id}
        rowClassName={(record, index) => getRowClassName(record, index)}
        columns={columns} dataSource={dataSource} style={{ border: "1px solid #c9cacac7", margin: "5px 0 0 0", }}
        pagination={false}
        size='small'
        scroll={{ x: 1200 }}
      >

      </Table>
      <Pagination
        total={dataSource.length}
        showTotal={(total) => `共 ${total} 条记录 第1~${total > 9 ? 10 : total} 条`}
        current={1}
        showSizeChanger={false}
        style={{ margin: "10px 0 0 0", fontSize: "12px" }}
      />

    </div>
  )
}
const mapStateToProps = ({ IsDrawerOpen: { openDrawer } }) => {
  return {
    openDrawer
  }
}
const mapDispatchToProps = {
  showDrawer(item) {
    return {
      type: "change_drawerOpen",
      openDrawer: true,
      row: item,
      drawerType: "devInfo_devDetail"
    }
  }
}
export default connect(mapStateToProps, mapDispatchToProps)(EdgeDevice)